<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>项目名称</span>
        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          size="mini"
          placeholder="项目名称"
          v-model="params['projectName']"
        ></el-input>
      </el-row>
      <!-- <el-row>
        <span>状态</span>
        <el-select v-model="params['status']" clearable placeholder="状态" size="small">
          <el-option
            v-for="(item,index) in checkStatusList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-row> -->
      <el-row style="padding-top:10px">
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
    </div>

    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" align="center" label="Id" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="projectName" align="center" label="项目名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.projectName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="projectType" align="center" label="项目类型" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.projectType | projectFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="totalAmount" align="center" label="总金额" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.totalAmount}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" align="center" label="状态" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.status | statusTypes}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkRemark" align="center" label="审核备注" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.checkRemark}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.createTime | parseTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="changeEnable(scope.row,1)"
          >审核通过</el-button>
          <el-button
            size="mini"
            type="info"
            @click="changeEnable(scope.row,0)"
          >审核驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
let statusFilter = ["审核驳回", "审核通过"];
let projectFilter ={1:'固定收益理财'}
let statustagFilter = ["success", "danger", "info", "warning"];
let adPositiontagFilter = ["success", "danger", "info", "warning"];
let statusType = {1:"待审核",5:"审核驳回",10:"初审核通过",20:"复审通过"}

let typeBanner = ["App轮播banner", "微信轮播banner", "首页banner"];
export default {
  data() {
    return {
      tableHeight: 400,
      total: 0,
      container: false,
      list: [],
      roleList: [],
      checkStatusList: [
        {
          label: "待审核",
          value: 1
        },
        {
          label: "审核驳回",
          value: 5
        },
        {
          label: "初审核通过",
          value: 10
        },
        {
          label: "复审通过",
          value: 20
        },
      ],
      projectFilter:projectFilter,
      params: {
        pageNo: 1,
        pageSize: 20,
        status:1
      },
      temp: {
        status: "",
        coverImg: "",
        roleIdList: ""
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      statusFilter: statusFilter,
      typeBanner: typeBanner,
      statusType:statusType,

      cityIdOptions: [],
      rules: {
        loginName: [
          {
            required: true,
            message: "请输入管理员用户名",
            trigger: "change"
          }
        ],
        roleIdList: [
          {
            required: true,
            message: "请选择所属管理组",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入管理员称呼",
            trigger: "change"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "change"
          }
        ],
        qq: [
          {
            required: true,
            message: "请输入QQ",
            trigger: "change"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "change"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "change"
          },
          {
            pattern: /^1[0-9]{10}$/, message: '手机号码不正确!'
          }
        ],
        email: [
          {
            required: true,
            message: "请输入Email",
            trigger: "change"
          },
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '请输入邮箱有误'
          }
        ],
        status: [
          {
            required: true,
            message: "请选中状态",
            trigger: "change"
          }
        ],
        coverImg: [
          {
            required: true,
            message: "请上传图片",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.loadData();
  },
  filters: {
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    statusTypes(status){
      return statusType[parseInt(status)];
    },
    projectFilter(status){
      return projectFilter[parseInt(status)];
    },
    typeBanner(status) {
      return typeBanner[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    },
    adPositiontagFilter(status) {
      return adPositiontagFilter[parseInt(status)];
    }
  },
  methods: {
    handleFilter() {
      this.loadData();
    },
    changeExamine(item) {
      this.$prompt('审核备注', '确认审核通过吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'       
      }).then(({ value }) => {
          this.$post("/admin/finance_project/check", {
            id: item.id,
            checkStatus: 1,
            checkStep:1,
            remark:value
          }).then(data => {
            this.loadData();
          });
      }).catch(() => {
        
      });
    },
    changeEnable(item,type) {
      if (type === 0) {
        this.$prompt("审核备注", "确认审核通过吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(({ value }) => {
            this.$post("/admin/finance_project/check", {
              id: item.id,
              checkStatus: 0,
              checkStep: 1,
              remark: value
            }).then(data => {
              this.loadData();
            });
          })
          .catch(() => {});
      }
      if (type === 1) {
        this.$prompt("审核备注", "确认审核通过吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(({ value }) => {
            this.$post("/admin/finance_project/check", {
              id: item.id,
              checkStatus: 1,
              checkStep: 1,
              remark: value
            }).then(data => {
              this.loadData();
            });
          })
          .catch(() => {});
      }
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    // handleDelete(row) {
    //   this.$confirm("确定删除该项目吗?", "提示").then(_ => {
    //     this.$post("/admin/finance_project/delete", {
    //       id: row.id
    //     }).then(data => {
    //       this.loadData();
    //     });
    //   });
    // },
    // handleDetail(row) {
    //   this.$confirm("详情接口", "提示").then(_ => {
    //     this.$post("/admin/finance_project/detail", {
    //       id: row.id
    //     }).then(data => {
    //       console.log(data)
    //     });
    //   });
    // },
    // editRow(row) {
    //   this.dialogFormVisible = true;
    //   this.isEditing = true;
    //   this.temp = Object.assign({}, row);
    // },
    // submitFormAction() {
    //   this.$refs["dataForm"].validate(valid => {
    //     if (valid) {
    //       this.submiting = true;
    //       const postData = Object.assign({}, this.temp);
    //       let url = "";
    //       if (this.isEditing) {
    //         url = "/admin/finance_project/modify";
    //       }
    //       this.$post(url, postData)
    //         .then(data => {
    //           this.loadData();
    //           this.$$notify("操作成功");
    //           this.dialogFormVisible = false;
    //           this.temp = {};
    //         })
    //         .finally(_ => {
    //           this.submiting = false;
    //         });
    //     }
    //   });
    // },
    loadData() {
      this.$post("/admin/finance_project/list", this.params)
        .then(data => {
            // data.dataList.forEach(val => {
            //     if(val.status === 10){
            //       this.list.push(val);
            //     }
            // });

            this.list = data.dataList;
        })
        .catch(_ => {
          console.log("Err", _);
        });
    }
  }
};
</script>

<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}
.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}
.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  height: 100px;
}
</style>
